<template>
  <div>
    <div class="container">
      <img src="../assets/u1 (1).png" alt="" />
      <h1>
        登录
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item
            prop="phone"
            label="账号"
            style="width: 300px; margin-top: 30px"
          >
            <el-input v-model="form.phone" placeholder="请输入您的手机号码" />
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input
              type="password"
              v-model="form.pwd"
              placeholder="请输入您的密码"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              @click="login('form')"
              type="primary"
              style="margin: 30px"
              >登录</el-button
            >
            <el-button @click="reset('form')" type="info" style="margin: 30px"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: "",
        pwd: "",
      },
      rules: {
        phone: [
          {
            required: true,
            message: "输入框不能为空,请输入您的手机号码",
            trigger: "blur",
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号码格式错误 ",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "输入框不能为空。您输入您的密码",
            trigger: "blur",
          },
          {
            pattern: /^\d{6}$/,
            message: "长度字符必须为6位有效数字",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$router.push("/component/usermanage");
        } else {
          alert("请重新输入您的账号和密码");
        }
      });
    },
    reset(form) {
      this.$refs[form].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-evenly;
  margin: 100px 100px 0 20px;
}
</style>